<div>
    <div class="grid grid-cols-2 gap-2 px-2">
        @foreach($videos as $video)
            <x-video-item :video="$video" :key="$video->id" @class(['col-span-2' => $topBig && $loop->first]) />
        @endforeach
    </div>

    <div class="p-2">
        <button type="button" class="flex items-center justify-center gap-1 w-full p-2 border border-neutral-400 text-neutral-400 rounded-full text-center text-sm"
                wire:loading.attr="disabled" wire:click.prevent="{{ $changeBatch }}">
            <svg wire:loading xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 animate-spin">
                <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"/>
            </svg>
            <span>换一批</span>
        </button>
    </div>
</div>
